import {
  AlertCircle,
  Calendar,
  CheckCircle,
  Clock,
  Database,
  Download,
  Eye,
  FileText,
  Globe,
  History,
  Package,
  Rocket,
  Search,
  TestTube,
  Users,
  Wrench,
  X,
  Zap,
} from "lucide-react";
import React, { useMemo, useState } from "react";

interface Version {
  id: string;
  version: string;
  releaseDate: string;
  isLatest?: boolean;
  isStable?: boolean;
  isDev?: boolean;
  platforms: {
    name: string;
    icon: React.ReactNode;
    downloadUrl: string;
    fileSize: string;
    systemRequirements: {
      envs?: string[];
      os: string;
      cpu: string;
      memory: string;
    };
  }[];
  changelog: string[];
  features?: string[];
}

const versions: Version[] = [
  {
    id: "5",
    version: "1.0.8-hotfix",
    releaseDate: "2025-11-18",
    isLatest: true,
    isStable: false,
    isDev: true,
    platforms: [
      {
        name: "ERP运行环境安装包",
        icon: <Package className="w-5 h-5" />,
        downloadUrl:
          "https://cdn.yeziji.xyz/DownloadCenter/DrugSupplyErp/v1.0.8-hotfix/drug-supply-erp-environment-setup.exe",
        fileSize: "101.91 MB (完整安装需要 571 MB 空间)",
        systemRequirements: {
          envs: ["Java11", "MySQL8"],
          os: "Windows 10/11 系统",
          cpu: "最低 2 核处理器",
          memory: "最低 2GB 内存",
        },
      },
      {
        name: "总部SDK启动器",
        icon: <Package className="w-5 h-5" />,
        downloadUrl:
          "https://cdn.yeziji.xyz/DownloadCenter/DrugServerTools/DRUG%20SERVER%20TOOLS-Windows-1.0.0-Setup.exe",
        fileSize: "101.91 MB (完整安装需要 391 MB 空间)",
        systemRequirements: {
          envs: ["Node"],
          os: "Windows 10/11 系统",
          cpu: "最低 2 核处理器",
          memory: "最低 2GB 内存",
        },
      },
      {
        name: "门店SDK启动器",
        icon: <Package className="w-5 h-5" />,
        downloadUrl:
          "https://cdn.yeziji.xyz/DownloadCenter/DrugServerTools/DRUG%20SERVER%20TOOLS%28STORE%29-Windows-1.0.0-Setup.exe",
        fileSize: "101.91 MB (完整安装需要 391 MB 空间)",
        systemRequirements: {
          envs: ["Node"],
          os: "Windows 10/11 系统",
          cpu: "最低 2 核处理器",
          memory: "最低 2GB 内存",
        },
      },
      {
        name: "DrugSupplyERP 客户端包",
        icon: <Users className="w-5 h-5" />,
        downloadUrl:
          "https://cdn.yeziji.xyz/DownloadCenter/DrugSupplyErp/v1.0.8-hotfix/Drug-Supply-ERP-Windows-1.0.8-hotfix-Setup.exe",
        fileSize: "114.36 MB (安装需要 490 MB 空间)",
        systemRequirements: {
          envs: ["Java 11", "MySQL8", "Node"],
          os: "Windows 10/11 系统",
          cpu: "最低 2 核处理器",
          memory: "最低 2GB 内存",
        },
      },
      {
        name: "DrugSupplyERP SDK",
        icon: <Users className="w-5 h-5" />,
        downloadUrl:
          "https://cdn.yeziji.xyz/deploy/dev-deploy/dev-erp-service/17/drug-supply-erp-service/target/drug-supply-erp-service-1.0.8-hotfix.jar",
        fileSize: "102.71 MB",
        systemRequirements: {
          envs: ["Java 11", "MySQL8"],
          os: "Windows 10/11 系统",
          cpu: "最低 2 核处理器",
          memory: "最低 2GB 内存",
        },
      },
      {
        name: "Speedy APK",
        icon: (
          <img
            src="https://cdn.yeziji.xyz/icons/yzj/speedy/256x256.png"
            alt="Speedy"
            className="w-12 h-12 object-contain"
          />
        ),
        downloadUrl:
          "https://cdn.yeziji.xyz/DownloadCenter/DrugSupplyErp/v1.0.8-hotfix/Speedy%201.0.5.apk",
        fileSize: "15.6 MB",
        systemRequirements: {
          os: "Android 系统",
          cpu: "最低 2 核处理器",
          memory: "最低 2GB 内存",
        },
      }
    ],
    changelog: ["重构拜访单模块", "配送端离线结算", "上线 Speedy APP", "hotfix: 客户端调拨明细无法排序", "hotfix: 调拨开单查询条件无效问题", "hotfix: 调拨明细换页后出现空白的问题", "hotfix: 配送端无法连续打印", "hotfix: 网络超时导致配送单状态无法更新的问题"],
    features: ["v1.0.8", "拜访单模块", "离线结算", "Speedy APP"],
  },
  {
    id: "4",
    version: "1.0.7-hotfix",
    releaseDate: "2025-10-26",
    isLatest: false,
    isStable: false,
    isDev: true,
    platforms: [
      {
        name: "ERP运行环境安装包",
        icon: <Package className="w-5 h-5" />,
        downloadUrl:
          "https://cdn.yeziji.xyz/DownloadCenter/DrugSupplyErp/v1.0.7-hotfix/drug-supply-erp-environment-setup.exe",
        fileSize: "101.91 MB (完整安装需要 571 MB 空间)",
        systemRequirements: {
          envs: ["Java11", "MySQL8"],
          os: "Windows 10/11 系统",
          cpu: "最低 2 核处理器",
          memory: "最低 2GB 内存",
        },
      },
      {
        name: "总部SDK启动器",
        icon: <Package className="w-5 h-5" />,
        downloadUrl:
          "https://cdn.yeziji.xyz/DownloadCenter/DrugServerTools/DRUG%20SERVER%20TOOLS-Windows-1.0.0-Setup.exe",
        fileSize: "101.91 MB (完整安装需要 391 MB 空间)",
        systemRequirements: {
          envs: ["Node"],
          os: "Windows 10/11 系统",
          cpu: "最低 2 核处理器",
          memory: "最低 2GB 内存",
        },
      },
      {
        name: "门店SDK启动器",
        icon: <Package className="w-5 h-5" />,
        downloadUrl:
          "https://cdn.yeziji.xyz/DownloadCenter/DrugServerTools/DRUG%20SERVER%20TOOLS%28STORE%29-Windows-1.0.0-Setup.exe",
        fileSize: "101.91 MB (完整安装需要 391 MB 空间)",
        systemRequirements: {
          envs: ["Node"],
          os: "Windows 10/11 系统",
          cpu: "最低 2 核处理器",
          memory: "最低 2GB 内存",
        },
      },
      {
        name: "DrugSupplyERP 客户端包",
        icon: <Users className="w-5 h-5" />,
        downloadUrl:
          "https://cdn.yeziji.xyz/DownloadCenter/DrugSupplyErp/v1.0.7-hotfix/Drug-Supply-ERP-Windows-1.0.7-hotfix-Setup.exe",
        fileSize: "114.36 MB (安装需要 490 MB 空间)",
        systemRequirements: {
          envs: ["Java 11", "MySQL8", "Node"],
          os: "Windows 10/11 系统",
          cpu: "最低 2 核处理器",
          memory: "最低 2GB 内存",
        },
      },
      {
        name: "DrugSupplyERP SDK",
        icon: <Users className="w-5 h-5" />,
        downloadUrl:
          "https://cdn.yeziji.xyz/DownloadCenter/DrugSupplyErp/v1.0.7-hotfix/drug-supply-erp-service-1.0.7-hotfix.jar",
        fileSize: "102.71 MB",
        systemRequirements: {
          envs: ["Java 11", "MySQL8"],
          os: "Windows 10/11 系统",
          cpu: "最低 2 核处理器",
          memory: "最低 2GB 内存",
        },
      },
    ],
    changelog: [
      "ERP 配送端结算审核",
      "本地调拨开单异常",
      "配送端票据打印配置同步",
      "配送端打印票据模板",
      "移除 Server 启动模式",
      "新增 SDK 启动包",
      "hotfix: 结算审核补充客户、配送员字段",
      "hotfix: 本地调拨新增导入功能",
      "hotfix: 门店端同步初始化总部数据的问题",
    ],
    features: ["v1.0.7-hotfix", "调拨导入", "门店初始化总部数据"],
  },
  {
    id: "3",
    version: "1.0.6-hotfix",
    releaseDate: "2025-10-05",
    isLatest: false,
    isStable: false,
    isDev: true,
    platforms: [
      {
        name: "DrugSupplyERP 完整安装包 (总部端)",
        icon: <Package className="w-5 h-5" />,
        downloadUrl:
          "https://cdn.yeziji.xyz/DownloadCenter/DrugSupplyErp/v1.0.6/headquarters/drug-supply-erp-setup.exe",
        fileSize: "462.86 MB (全部安装后, 需要 2.5 GB 空间)",
        systemRequirements: {
          envs: ["Java 11", "MySQL8", "Node"],
          os: "Windows 10/11 系统",
          cpu: "最低 2 核处理器",
          memory: "最低 4GB 内存",
        },
      },
      {
        name: "DrugSupplyERP 完整安装包 (门店端)",
        icon: <Package className="w-5 h-5" />,
        downloadUrl:
          "https://cdn.yeziji.xyz/DownloadCenter/DrugSupplyErp/v1.0.6/shore/drug-supply-erp-setup.exe",
        fileSize: "462.86 MB (全部安装后, 需要 2.5 GB 空间)",
        systemRequirements: {
          envs: ["Java 11", "MySQL8", "Node"],
          os: "Windows 10/11 系统",
          cpu: "最低 2 核处理器",
          memory: "最低 4GB 内存",
        },
      },
      {
        name: "DrugSupplyERP 客户端包",
        icon: <Users className="w-5 h-5" />,
        downloadUrl:
          "https://cdn.yeziji.xyz/DownloadCenter/DrugSupplyErp/v1.0.6/Drug-Supply-ERP-Windows-1.0.6-Setup.exe",
        fileSize: "114.36 MB (解压后, 需要 490 MB 空间)",
        systemRequirements: {
          envs: ["Java 11", "MySQL8", "Node"],
          os: "Windows 10/11 系统",
          cpu: "最低 2 核处理器",
          memory: "最低 2GB 内存",
        },
      },
      {
        name: "DrugSupplyERP SDK",
        icon: <Users className="w-5 h-5" />,
        downloadUrl:
          "https://cdn.yeziji.xyz/DownloadCenter/DrugSupplyErp/v1.0.6/drug-supply-erp-service-1.0.6.jar",
        fileSize: "102.71 MB",
        systemRequirements: {
          envs: ["Java 11", "MySQL8"],
          os: "Windows 10/11 系统",
          cpu: "最低 2 核处理器",
          memory: "最低 2GB 内存",
        },
      },
    ],
    changelog: [
      "新增配送端结算推送",
      "新增配送端退单推送",
      "新增线上平台管理",
      "hotfix(SDK): 修复供应商导入异常的问题",
      "hotfix(SDK): 修复药物资料点击名称或编码排序异常的问题",
      "hotfix(SDK): 修复导出客户资料字段与数据不对齐的问题",
      "hotfix(Client): 打印配置中公共配置和库存码配置初始化时无法正常加载的问题",
    ],
    features: ["v1.0.6", "热修复SDK", "热修复客户端"],
  },
  {
    id: "2",
    version: "1.0.5-hotfix-v1",
    releaseDate: "2025-09-22",
    isLatest: false,
    isStable: false,
    isDev: true,
    platforms: [
      {
        name: "DrugSupplyERP 完整安装包 (总部端)",
        icon: <Package className="w-5 h-5" />,
        downloadUrl:
          "https://cdn.yeziji.xyz/DownloadCenter/DrugSupplyErp/v1.0.5-v2/headquarters/drug-supply-erp-setup.exe",
        fileSize: "469.75 MB (全部安装后, 需要 2.5 GB 空间)",
        systemRequirements: {
          envs: ["Java 11", "MySQL8", "Node"],
          os: "Windows 10/11 系统",
          cpu: "最低 2 核处理器",
          memory: "最低 4GB 内存",
        },
      },
      {
        name: "DrugSupplyERP 完整安装包 (门店端)",
        icon: <Package className="w-5 h-5" />,
        downloadUrl:
          "https://cdn.yeziji.xyz/DownloadCenter/DrugSupplyErp/v1.0.5-v2/shore/drug-supply-erp-setup.exe",
        fileSize: "469.75 MB (全部安装后, 需要 2.5 GB 空间)",
        systemRequirements: {
          envs: ["Java 11", "MySQL8", "Node"],
          os: "Windows 10/11 系统",
          cpu: "最低 2 核处理器",
          memory: "最低 4GB 内存",
        },
      },
      {
        name: "DrugSupplyERP 客户端包",
        icon: <Users className="w-5 h-5" />,
        downloadUrl:
          "https://cdn.yeziji.xyz/DownloadCenter/DrugSupplyErp/v1.0.5-v2/Drug-Supply-ERP-Windows-1.0.5-Setup.exe",
        fileSize: "121.1 MB (解压后, 需要 490 MB 空间)",
        systemRequirements: {
          envs: ["Java 11", "MySQL8", "Node"],
          os: "Windows 10/11 系统",
          cpu: "最低 2 核处理器",
          memory: "最低 2GB 内存",
        },
      },
      {
        name: "DrugSupplyERP SDK",
        icon: <Users className="w-5 h-5" />,
        downloadUrl:
          "https://cdn.yeziji.xyz/DownloadCenter/DrugSupplyErp/v1.0.5-v2/drug-supply-erp-service-1.0.5.jar",
        fileSize: "102.68 MB",
        systemRequirements: {
          envs: ["Java 11", "MySQL8"],
          os: "Windows 10/11 系统",
          cpu: "最低 2 核处理器",
          memory: "最低 2GB 内存",
        },
      },
    ],
    changelog: [
      "完善销售单复审流程",
      "优化快捷键",
      "新增客户端重连入口",
      "新增旧账导入入口、新增旧账结算功能",
      "新增 ERP 派送单据至配送端",
      "新增线上平台管理入口",
      "新增取消配送同步至配送端",
      "修复服务SDK更新导致查询系统异常问题",
    ],
    features: ["v1.0.5-热补丁版"],
  },
  {
    id: "1",
    version: "1.0.4",
    releaseDate: "2025-08-12",
    isLatest: false,
    isStable: false,
    isDev: true,
    platforms: [
      {
        name: "DrugSupplyERP 完整安装包 (总部端)",
        icon: <Package className="w-5 h-5" />,
        downloadUrl:
          "https://cdn.yeziji.xyz/DownloadCenter/DrugSupplyErp/v1.0.4/headquarters/drug-supply-erp-setup.exe",
        fileSize: "468.14 MB (全部安装后, 需要 2.5 GB 空间)",
        systemRequirements: {
          envs: ["Java 11", "MySQL8", "Node"],
          os: "Windows 10/11 系统",
          cpu: "最低 2 核处理器",
          memory: "最低 4GB 内存",
        },
      },
      {
        name: "DrugSupplyERP 完整安装包 (门店端)",
        icon: <Package className="w-5 h-5" />,
        downloadUrl:
          "https://cdn.yeziji.xyz/DownloadCenter/DrugSupplyErp/v1.0.4/shore/drug-supply-erp-setup.exe",
        fileSize: "468.14 MB (全部安装后, 需要 2.5 GB 空间)",
        systemRequirements: {
          envs: ["Java 11", "MySQL8", "Node"],
          os: "Windows 10/11 系统",
          cpu: "最低 2 核处理器",
          memory: "最低 4GB 内存",
        },
      },
      {
        name: "DrugSupplyERP 客户端包",
        icon: <Users className="w-5 h-5" />,
        downloadUrl:
          "https://cdn.yeziji.xyz/DownloadCenter/DrugSupplyErp/v1.0.4/Drug-Supply-ERP-Windows-1.0.4-Setup.exe",
        fileSize: "121.1 MB (解压后, 需要 490 MB 空间)",
        systemRequirements: {
          envs: ["Java 11", "MySQL8", "Node"],
          os: "Windows 10/11 系统",
          cpu: "最低 2 核处理器",
          memory: "最低 2GB 内存",
        },
      },
      {
        name: "DrugSupplyERP SDK",
        icon: <Users className="w-5 h-5" />,
        downloadUrl:
          "https://cdn.yeziji.xyz/DownloadCenter/DrugSupplyErp/v1.0.4/drug-supply-erp-service.jar",
        fileSize: "100.49 MB",
        systemRequirements: {
          envs: ["Java 11", "MySQL8"],
          os: "Windows 10/11 系统",
          cpu: "最低 2 核处理器",
          memory: "最低 2GB 内存",
        },
      },
    ],
    changelog: [
      "新增字体大小配置",
      "新增采购和费用文件导入",
      "优化了开场动画 & 界面超出宽度时追加滚动条",
      "取消了 API 默认配置，首次使用时需要用户进行配置",
    ],
    features: ["初版"],
  },
];

// 历史版本数据
const historicalVersions: Version[] = [
  {
    id: "4",
    version: "1.0.5",
    releaseDate: "2025-09-12",
    isLatest: false,
    isStable: false,
    isDev: true,
    platforms: [],
    changelog: [
      "完善销售单复审流程",
      "优化快捷键",
      "新增客户端重连入口",
      "新增旧账导入入口、新增旧账结算功能",
      "新增 ERP 派送单据至配送端",
      "新增线上平台管理入口",
      "新增取消配送同步至配送端",
      "修复服务SDK更新导致查询系统异常问题",
    ],
  },
  {
    id: "3",
    version: "1.0.4",
    releaseDate: "2025-09-12",
    isLatest: false,
    isStable: false,
    isDev: true,
    platforms: [],
    changelog: [
      "新增字体大小配置",
      "新增采购和费用文件导入",
      "优化了开场动画 & 界面超出宽度时追加滚动条",
      "取消了 API 默认配置，首次使用时需要用户进行配置",
    ],
    features: ["权限管理", "功能优化"],
  },
  {
    id: "1",
    version: "1.0.3",
    releaseDate: "2025-08-12",
    isLatest: false,
    isStable: false,
    isDev: true,
    platforms: [],
    changelog: [
      "新增药物价格导入至商品库",
      "新增销售开单明细调价权限",
      "销售开单过滤无库存和 0 可售的药物",
    ],
    features: ["权限管理", "功能优化"],
  },
  {
    id: "2",
    version: "1.0.2",
    releaseDate: "2025-08-10",
    isLatest: false,
    isStable: false,
    isDev: true,
    platforms: [],
    changelog: [
      "新增确认调拨的出入库权限（含跨门店）",
      "支票异常处理支持溢出产生预收",
      "支票异常明细去除掉结算状态",
      "修复支票存票后没显示存票时间的问题",
    ],
    features: ["核心功能", "功能优化"],
  },
  {
    id: "3",
    version: "1.0.0",
    releaseDate: "2025-08-09",
    isLatest: false,
    isStable: false,
    isDev: true,
    platforms: [],
    changelog: ["Beta 初版本发布", "修复服务端中文乱码问题"],
    features: ["Beta版本", "界面优化"],
  },
];

interface UtilityTool {
  id: string;
  name: string;
  description: string;
  icon: React.ReactNode;
  version: string;
  fileSize: string;
  downloadUrl: string;
  category: string;
}

const utilityTools: UtilityTool[] = [
  {
    id: "1",
    name: "Navicat Premium",
    description: "用于数据库备份、恢复和维护的专业工具",
    icon: <Database className="w-6 h-6" />,
    version: "17.3.1.0",
    fileSize: "146.8 MB",
    downloadUrl:
      "https://cdn.yeziji.xyz/DownloadCenter/navicat17_premium_lite_cs_x64.exe",
    category: "数据库工具",
  },
  {
    id: "2",
    name: "DirectXRepair_v4.0",
    description: "DirectX 环境修复工具,如果系统缺失运行环境,下载该工具进行修复",
    icon: <Wrench className="w-6 h-6" />,
    version: "4.0",
    fileSize: "199.96 MB",
    downloadUrl: "https://cdn.yeziji.xyz/DownloadCenter/DirectXRepair_v4.0.zip",
    category: "修复工具",
  },
  {
    id: "3",
    name: "总部SDK启动器",
    description:
      "Drug Supply ERP 总部服务启动器，支持日志监控、自动更新部署的功能",
    icon: <Wrench className="w-6 h-6" />,
    version: "1.0.0",
    fileSize: "101.91 MB",
    downloadUrl:
      "https://cdn.yeziji.xyz/DownloadCenter/DrugServerTools/DRUG%20SERVER%20TOOLS-Windows-1.0.0-Setup.exe",
    category: "运维工具",
  },
  {
    id: "4",
    name: "门店SDK启动器",
    description:
      "Drug Supply ERP 门店服务启动器，支持日志监控、自动更新部署的功能",
    icon: <Wrench className="w-6 h-6" />,
    version: "1.0.0",
    fileSize: "101.91 MB",
    downloadUrl:
      "https://cdn.yeziji.xyz/DownloadCenter/DrugServerTools/DRUG%20SERVER%20TOOLS%28STORE%29-Windows-1.0.0-Setup.exe",
    category: "运维工具",
  },
];

// 版本前瞻数据
interface PreviewVersion {
  id: string;
  version: string;
  expectedReleaseDate: string;
  status: "planning" | "development" | "testing" | "ready";
  progress: number;
  features: {
    name: string;
    description: string;
    status: "planned" | "in-progress" | "completed" | "testing";
  }[];
  testPlatforms?: {
    name: string;
    url: string;
    credentials: {
      username: string;
      password: string;
    };
    description: string;
  }[];
  highlights: string[];
}

const previewVersions: PreviewVersion[] = [
  {
    id: "3",
    version: "1.0.8",
    expectedReleaseDate: "2025-10-31",
    status: "development",
    progress: 90,
    features: [
      {
        name: "ERP 配送端结算审核",
        description:
          "配送端结算后，将结算信息保存至终端并通知线上平台进行审核，最后同步给 ERP 端",
        status: "completed",
      },
      {
        name: "配送端票据打印",
        description: "配送端配送完成后，需要将完成信息打印至配送端票据打印机",
        status: "in-progress",
      },
    ],
    testPlatforms: [
      {
        name: "总部 ERP",
        url: "http://test-erp.yeziji.xyz/",
        credentials: {
          username: "admin",
          password: "admin12345",
        },
        description: "总部端管理系统",
      },
      {
        name: "门店 ERP",
        url: "http://test-shore-erp2.yeziji.xyz/",
        credentials: {
          username: "admin",
          password: "admin12345",
        },
        description: "门店端管理系统",
      },
      {
        name: "配送端",
        url: "http://test-delivery.yeziji.xyz/",
        credentials: {
          username: "MallDelivery",
          password: "MallDelivery",
        },
        description: "配送员专用系统（几内亚总部）",
      },
      {
        name: "PDA 端",
        url: "http://test-pda.yeziji.xyz/",
        credentials: {
          username: "admin",
          password: "admin12345",
        },
        description: "手持设备专用系统 (http://test-erp.yeziji.xyz/api）",
      },
      {
        name: "线上平台",
        url: "http://test-mall-admin.yeziji.xyz/",
        credentials: {
          username: "admin",
          password: "admin12345",
        },
        description: "线上商城管理后台",
      },
    ],
    highlights: ["配送端结算", "配送端退货", "线上平台管理"],
  },
];

function App() {
  const [searchTerm, setSearchTerm] = useState("");
  const [selectedPlatform, setSelectedPlatform] = useState("全部");
  const [showStableOnly, setShowStableOnly] = useState(false);
  const [expandedVersion, setExpandedVersion] = useState<string | null>(null);
  const [showVersionHistory, setShowVersionHistory] = useState(false);
  const [showVersionPreview, setShowVersionPreview] = useState(false);

  const platforms = [
    "全部",
    "DrugSupplyERP 完整包 (总部端)",
    "DrugSupplyERP 客户端包",
    "DrugSupplyERP SDK (总部)",
    "DrugSupplyERP SDK (门店)",
  ];

  const filteredVersions = useMemo(() => {
    return versions.filter((version) => {
      const matchesSearch =
        version.version.toLowerCase().includes(searchTerm.toLowerCase()) ||
        version.changelog.some((change) =>
          change.toLowerCase().includes(searchTerm.toLowerCase())
        );

      const matchesPlatform =
        selectedPlatform === "全部" ||
        version.platforms.some((p) => p.name === selectedPlatform);

      const matchesStability = !showStableOnly || version.isStable;

      return matchesSearch && matchesPlatform && matchesStability;
    });
  }, [searchTerm, selectedPlatform, showStableOnly]);

  const handleDownload = (
    platformName: string,
    version: string,
    downloadUrl: string
  ) => {
    console.log(`下载 ${version} - ${platformName}`);

    // 创建下载链接
    const link = document.createElement("a");
    link.href = downloadUrl;
    link.download = `${platformName}-v${version}`;

    // 添加下载属性
    link.setAttribute("download", "");
    link.setAttribute("target", "_blank");

    // 触发下载
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  const handleUtilityDownload = (toolName: string, downloadUrl: string) => {
    console.log(`下载工具: ${toolName}`);

    // 创建下载链接
    const link = document.createElement("a");
    link.href = downloadUrl;
    link.download = toolName;

    // 添加下载属性
    link.setAttribute("download", "");
    link.setAttribute("target", "_blank");

    // 触发下载
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
      {/* Header */}
      <header className="bg-white shadow-sm border-b border-slate-200">
        <div className="max-w-7xl mx-auto px-6 py-8">
          <div className="text-center">
            <h1 className="text-4xl font-bold text-slate-900 mb-3">
              DrugSupplyERP 下载中心
            </h1>
            <p className="text-lg text-slate-600 max-w-2xl mx-auto">
              选择适合您需求的 DrugSupplyERP 版本，体验最新功能和性能优化
            </p>
          </div>
        </div>
      </header>

      {/* Controls */}
      <div className="max-w-7xl mx-auto px-6 py-8">
        <div className="bg-white rounded-2xl shadow-sm border border-slate-200 p-6 mb-8">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
            {/* Search */}
            <div className="md:col-span-2">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 w-5 h-5" />
                <input
                  type="text"
                  placeholder="搜索版本号或功能..."
                  className="w-full pl-10 pr-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                />
              </div>
            </div>

            {/* Package Filter */}
            <div>
              <select
                className="w-full py-3 px-4 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                value={selectedPlatform}
                onChange={(e) => setSelectedPlatform(e.target.value)}
              >
                {platforms.map((packageType) => (
                  <option key={packageType} value={packageType}>
                    {packageType}
                  </option>
                ))}
              </select>
            </div>

            {/* Stable Only Toggle */}
            <div className="flex items-center">
              <label className="flex items-center space-x-3 cursor-pointer">
                <input
                  type="checkbox"
                  className="w-5 h-5 text-blue-600 border-slate-300 rounded focus:ring-blue-500"
                  checked={showStableOnly}
                  onChange={(e) => setShowStableOnly(e.target.checked)}
                />
                <span className="text-sm text-slate-700">仅显示稳定版</span>
              </label>
            </div>

            {/* Version History Button */}
            <div className="md:col-span-4 flex justify-end">
              <button
                onClick={() => setShowVersionPreview(true)}
                className="flex items-center space-x-2 px-4 py-2 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white rounded-lg transition-colors mr-3"
              >
                <Rocket className="w-4 h-4" />
                <span>版本前瞻</span>
              </button>
              <button
                onClick={() => setShowVersionHistory(true)}
                className="flex items-center space-x-2 px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-lg transition-colors"
              >
                <History className="w-4 h-4" />
                <span>版本历史</span>
              </button>
            </div>
          </div>
        </div>

        {/* Version Cards */}
        <div className="grid gap-6">
          {filteredVersions.map((version) => (
            <div
              key={version.id}
              className={`bg-white rounded-2xl shadow-sm border transition-all duration-300 hover:shadow-md ${
                version.isLatest
                  ? "border-blue-300 bg-gradient-to-r from-blue-50 to-white"
                  : "border-slate-200"
              }`}
            >
              <div className="p-6">
                <div className="flex flex-col lg:flex-row lg:items-center justify-between mb-4">
                  <div className="flex items-center space-x-4 mb-4 lg:mb-0">
                    <div className="flex items-center space-x-3">
                      <h3 className="text-2xl font-bold text-slate-900">
                        v{version.version}
                      </h3>
                      {version.isLatest && (
                        <span className="bg-gradient-to-r from-blue-600 to-blue-700 text-white px-3 py-1 rounded-full text-sm font-medium">
                          最新版本
                        </span>
                      )}
                      {version.isStable && (
                        <span className="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium flex items-center space-x-1">
                          <CheckCircle className="w-4 h-4" />
                          <span>稳定版</span>
                        </span>
                      )}
                      {version.isDev && (
                        <span className="bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm font-medium flex items-center space-x-1">
                          <AlertCircle className="w-4 h-4" />
                          <span>开发版</span>
                        </span>
                      )}
                    </div>
                  </div>

                  <div className="flex items-center space-x-4 text-sm text-slate-600">
                    <div className="flex items-center space-x-2">
                      <Calendar className="w-4 h-4" />
                      <span>{version.releaseDate}</span>
                    </div>
                    <button
                      onClick={() =>
                        setExpandedVersion(
                          expandedVersion === version.id ? null : version.id
                        )
                      }
                      className="flex items-center space-x-2 text-blue-600 hover:text-blue-800 transition-colors"
                    >
                      <FileText className="w-4 h-4" />
                      <span>查看更新日志</span>
                    </button>
                    <button
                      onClick={() => setShowVersionHistory(true)}
                      className="flex items-center space-x-2 text-slate-500 hover:text-slate-700 transition-colors"
                    >
                      <Clock className="w-4 h-4" />
                      <span>历史版本</span>
                    </button>
                    <button
                      onClick={() => setShowVersionPreview(true)}
                      className="flex items-center space-x-2 text-blue-600 hover:text-blue-800 transition-colors"
                    >
                      <Rocket className="w-4 h-4" />
                      <span>版本前瞻</span>
                    </button>
                  </div>
                </div>

                {/* Features */}
                {version.features && (
                  <div className="flex flex-wrap gap-2 mb-4">
                    {version.features.map((feature, index) => (
                      <span
                        key={index}
                        className="bg-slate-100 text-slate-700 px-3 py-1 rounded-lg text-sm"
                      >
                        {feature}
                      </span>
                    ))}
                  </div>
                )}

                {/* Download Buttons */}
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  {version.platforms.map((packageInfo) => (
                    <div
                      key={packageInfo.name}
                      className="border border-slate-200 rounded-xl p-4 hover:border-blue-300 transition-colors"
                    >
                      <div className="flex items-center space-x-3 mb-3">
                        {packageInfo.icon}
                        <div>
                          <h4 className="font-semibold text-slate-900">
                            {packageInfo.name}
                          </h4>
                          <p className="text-sm text-slate-600">
                            {packageInfo.fileSize}
                          </p>
                        </div>
                      </div>

                      <div className="text-xs text-slate-500 mb-3 space-y-1">
                        {packageInfo.systemRequirements.envs && (
                          <p>
                            <span className="font-medium">环境：</span>
                            {packageInfo.systemRequirements.envs.join("、")}
                          </p>
                        )}
                        <p>
                          <span className="font-medium">系统：</span>
                          {packageInfo.systemRequirements.os}
                        </p>
                        <p>
                          <span className="font-medium">处理器：</span>
                          {packageInfo.systemRequirements.cpu}
                        </p>
                        <p>
                          <span className="font-medium">内存：</span>
                          {packageInfo.systemRequirements.memory}
                        </p>
                      </div>

                      <button
                        onClick={() =>
                          handleDownload(
                            packageInfo.name,
                            version.version,
                            packageInfo.downloadUrl
                          )
                        }
                        className="w-full bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white py-2.5 px-4 rounded-lg font-medium transition-all duration-200 transform hover:scale-105 flex items-center justify-center space-x-2"
                      >
                        <Download className="w-4 h-4" />
                        <span>下载</span>
                      </button>
                    </div>
                  ))}
                </div>

                {/* Changelog */}
                {expandedVersion === version.id && (
                  <div className="mt-6 p-4 bg-slate-50 rounded-xl border border-slate-200">
                    <h4 className="font-semibold text-slate-900 mb-3">
                      更新日志
                    </h4>
                    <ul className="space-y-2">
                      {version.changelog.map((change, index) => (
                        <li
                          key={index}
                          className="flex items-start space-x-2 text-sm text-slate-700"
                        >
                          <span className="w-1.5 h-1.5 bg-blue-600 rounded-full mt-2 flex-shrink-0"></span>
                          <span>{change}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                )}
              </div>
            </div>
          ))}
        </div>

        {/* No Results */}
        {filteredVersions.length === 0 && (
          <div className="text-center py-12">
            <AlertCircle className="w-16 h-16 text-slate-400 mx-auto mb-4" />
            <h3 className="text-xl font-semibold text-slate-900 mb-2">
              未找到匹配的版本
            </h3>
            <p className="text-slate-600">请尝试调整搜索条件或筛选选项</p>
          </div>
        )}
      </div>

      {/* Version Preview Modal */}
      {showVersionPreview && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-2xl shadow-2xl max-w-8xl w-full max-h-[85vh] overflow-hidden">
            <div className="flex items-center justify-between p-6 border-b border-slate-200 bg-gradient-to-r from-blue-50 to-indigo-50">
              <div className="flex items-center space-x-3">
                <div className="w-10 h-10 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-lg flex items-center justify-center">
                  <Rocket className="w-5 h-5 text-white" />
                </div>
                <div>
                  <h2 className="text-2xl font-bold text-slate-900">
                    版本前瞻
                  </h2>
                  <p className="text-sm text-slate-600">
                    查看即将发布的功能和测试版本
                  </p>
                </div>
              </div>
              <button
                onClick={() => setShowVersionPreview(false)}
                className="p-2 hover:bg-white hover:bg-opacity-50 rounded-lg transition-colors"
              >
                <X className="w-5 h-5 text-slate-500" />
              </button>
            </div>

            <div className="p-6 overflow-y-auto max-h-[70vh]">
              <div className="grid gap-8">
                {previewVersions.map((preview) => (
                  <div
                    key={preview.id}
                    className="bg-gradient-to-r from-slate-50 to-blue-50 rounded-2xl p-6 border border-slate-200"
                  >
                    {/* Version Header */}
                    <div className="mb-6">
                      <div className="flex items-center space-x-4 mb-4">
                        <h3 className="text-2xl font-bold text-slate-900">
                          v{preview.version}
                        </h3>
                        <div
                          className={`px-3 py-1 rounded-full text-sm font-medium flex items-center space-x-1 ${
                            preview.status === "ready"
                              ? "bg-green-100 text-green-800"
                              : preview.status === "testing"
                              ? "bg-blue-100 text-blue-800"
                              : preview.status === "development"
                              ? "bg-yellow-100 text-yellow-800"
                              : "bg-slate-100 text-slate-800"
                          }`}
                        >
                          {preview.status === "ready" && (
                            <CheckCircle className="w-4 h-4" />
                          )}
                          {preview.status === "testing" && (
                            <TestTube className="w-4 h-4" />
                          )}
                          {preview.status === "development" && (
                            <Zap className="w-4 h-4" />
                          )}
                          {preview.status === "planning" && (
                            <Clock className="w-4 h-4" />
                          )}
                          <span>
                            {preview.status === "ready" && "准备发布"}
                            {preview.status === "testing" && "测试中"}
                            {preview.status === "development" && "开发中"}
                            {preview.status === "planning" && "规划中"}
                          </span>
                        </div>
                      </div>

                      <div className="flex items-center space-x-4 text-sm text-slate-600 mb-4">
                        <div className="flex items-center space-x-2">
                          <Calendar className="w-4 h-4" />
                          <span>预计发布：{preview.expectedReleaseDate}</span>
                        </div>
                        <div className="flex items-center space-x-2">
                          <div className="w-4 h-4 bg-slate-200 rounded-full overflow-hidden">
                            <div
                              className="h-full bg-gradient-to-r from-blue-500 to-blue-600 transition-all duration-300"
                              style={{ width: `${preview.progress}%` }}
                            ></div>
                          </div>
                          <span>进度：{preview.progress}%</span>
                        </div>
                      </div>

                      {/* Highlights */}
                      <div className="flex flex-wrap gap-2 mb-6">
                        {preview.highlights.map((highlight, index) => (
                          <span
                            key={index}
                            className="bg-gradient-to-r from-blue-100 to-indigo-100 text-blue-800 px-3 py-1 rounded-lg text-sm font-medium"
                          >
                            {highlight}
                          </span>
                        ))}
                      </div>
                    </div>

                    {/* Test Access - Full width horizontal layout */}
                    {preview.testPlatforms && (
                      <div className="mb-6">
                        <div className="bg-white rounded-xl p-4 border border-blue-200">
                          <div className="flex items-center space-x-2 mb-4">
                            <TestTube className="w-5 h-5 text-blue-600" />
                            <h4 className="font-semibold text-slate-900">
                              多平台测试体验
                            </h4>
                          </div>

                          {/* Responsive grid for platforms */}
                          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
                            {preview.testPlatforms.map((platform, idx) => (
                              <div
                                key={idx}
                                className="border border-slate-200 rounded-lg p-4 hover:border-blue-300 transition-colors bg-white"
                              >
                                <div className="flex flex-col items-center text-center mb-3">
                                  <h5 className="font-medium text-slate-900 text-sm mb-2">
                                    {platform.name}
                                  </h5>
                                  <button
                                    onClick={() =>
                                      window.open(platform.url, "_blank")
                                    }
                                    className="bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white px-4 py-2 rounded text-sm font-medium transition-all duration-200 flex items-center space-x-2 w-full justify-center"
                                  >
                                    <Globe className="w-4 h-4" />
                                    <span>体验</span>
                                  </button>
                                </div>

                                <p className="text-sm text-slate-600 mb-3 line-clamp-2 text-center">
                                  {platform.description}
                                </p>

                                <div className="text-xs text-slate-500 space-y-2 bg-slate-50 rounded p-3">
                                  <div className="flex flex-col space-y-1">
                                    <span className="font-medium text-slate-700">
                                      用户名
                                    </span>
                                    <span className="font-mono bg-white px-2 py-1 rounded border text-center">
                                      {platform.credentials.username}
                                    </span>
                                  </div>
                                  <div className="flex flex-col space-y-1">
                                    <span className="font-medium text-slate-700">
                                      密码
                                    </span>
                                    <span className="font-mono bg-white px-2 py-1 rounded border text-center">
                                      {platform.credentials.password}
                                    </span>
                                  </div>
                                </div>
                              </div>
                            ))}
                          </div>
                        </div>
                      </div>
                    )}

                    {/* Features List - Full width */}
                    <div>
                      <h4 className="font-semibold text-slate-900 mb-4 flex items-center space-x-2">
                        <Eye className="w-4 h-4" />
                        <span>新功能预览</span>
                      </h4>
                      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                        {preview.features.map((feature, index) => (
                          <div
                            key={index}
                            className="bg-white rounded-lg p-4 border border-slate-200 hover:border-blue-200 transition-colors"
                          >
                            <div className="flex items-center justify-between mb-2">
                              <h5 className="font-medium text-slate-900 text-sm">
                                {feature.name}
                              </h5>
                              <span
                                className={`px-2 py-1 rounded-full text-xs font-medium flex-shrink-0 ${
                                  feature.status === "completed"
                                    ? "bg-green-100 text-green-700"
                                    : feature.status === "testing"
                                    ? "bg-blue-100 text-blue-700"
                                    : feature.status === "in-progress"
                                    ? "bg-yellow-100 text-yellow-700"
                                    : "bg-slate-100 text-slate-600"
                                }`}
                              >
                                {feature.status === "completed" && "已完成"}
                                {feature.status === "testing" && "测试中"}
                                {feature.status === "in-progress" && "开发中"}
                                {feature.status === "planned" && "计划中"}
                              </span>
                            </div>
                            <p className="text-sm text-slate-600">
                              {feature.description}
                            </p>
                          </div>
                        ))}
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div className="p-6 border-t border-slate-200 bg-slate-50">
              <div className="flex items-center justify-center space-x-2 text-sm text-slate-500 pb-5">
                <AlertCircle className="w-4 h-4" />
                <span>
                  测试版本仅供体验，数据可能会被重置，请勿用于生产环境
                </span>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Version History Modal */}
      {showVersionHistory && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-2xl shadow-2xl max-w-4xl w-full max-h-[80vh] overflow-hidden">
            <div className="flex items-center justify-between p-6 border-b border-slate-200">
              <h2 className="text-2xl font-bold text-slate-900">版本历史</h2>
              <button
                onClick={() => setShowVersionHistory(false)}
                className="p-2 hover:bg-slate-100 rounded-lg transition-colors"
              >
                <X className="w-5 h-5 text-slate-500" />
              </button>
            </div>

            <div className="p-6 overflow-y-auto max-h-[60vh]">
              <div className="space-y-6">
                {historicalVersions.map((version, index) => (
                  <div key={version.id} className="relative">
                    {/* Timeline line */}
                    {index < historicalVersions.length - 1 && (
                      <div className="absolute left-6 top-12 w-0.5 h-full bg-slate-200"></div>
                    )}

                    <div className="flex items-start space-x-4">
                      {/* Timeline dot */}
                      <div
                        className={`w-12 h-12 rounded-full flex items-center justify-center flex-shrink-0 ${
                          version.isStable
                            ? "bg-green-100 text-green-600"
                            : "bg-blue-100 text-blue-600"
                        }`}
                      >
                        <Clock className="w-5 h-5" />
                      </div>

                      {/* Version content */}
                      <div className="flex-1 bg-slate-50 rounded-xl p-4">
                        <div className="flex items-center justify-between mb-3">
                          <div className="flex items-center space-x-3">
                            <h3 className="text-lg font-semibold text-slate-900">
                              v{version.version}
                            </h3>
                            {version.isStable && (
                              <span className="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs font-medium">
                                稳定版
                              </span>
                            )}
                            {version.isDev && (
                              <span className="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs font-medium">
                                开发版
                              </span>
                            )}
                          </div>
                          <div className="flex items-center space-x-2 text-sm text-slate-500">
                            <Calendar className="w-4 h-4" />
                            <span>{version.releaseDate}</span>
                          </div>
                        </div>

                        {/* Features */}
                        {version.features && (
                          <div className="flex flex-wrap gap-2 mb-3">
                            {version.features.map((feature, idx) => (
                              <span
                                key={idx}
                                className="bg-white text-slate-600 px-2 py-1 rounded-lg text-xs border border-slate-200"
                              >
                                {feature}
                              </span>
                            ))}
                          </div>
                        )}

                        {/* Changelog */}
                        <div>
                          <h4 className="font-medium text-slate-800 mb-2">
                            更新内容：
                          </h4>
                          <ul className="space-y-1">
                            {version.changelog.map((change, idx) => (
                              <li
                                key={idx}
                                className="flex items-start space-x-2 text-sm text-slate-600"
                              >
                                <span className="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></span>
                                <span>{change}</span>
                              </li>
                            ))}
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div className="p-6 border-t border-slate-200 bg-slate-50">
              <div className="flex items-center justify-center space-x-2 text-sm text-slate-500">
                <AlertCircle className="w-4 h-4" />
                <span>历史版本仅供查看更新记录，如需下载请联系技术支持</span>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Utility Tools Section */}
      <div className="max-w-7xl mx-auto px-6 py-12">
        <div className="text-center mb-8">
          <h2 className="text-3xl font-bold text-slate-900 mb-4">通用工具包</h2>
          <p className="text-lg text-slate-600 max-w-2xl mx-auto">
            相关的辅助工具，提升系统管理和维护效率
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {utilityTools.map((tool) => (
            <div
              key={tool.id}
              className="bg-white rounded-2xl shadow-sm border border-slate-200 p-6 hover:shadow-md hover:border-blue-300 transition-all duration-300"
            >
              <div className="flex items-center justify-center w-16 h-16 bg-gradient-to-br from-blue-100 to-blue-200 rounded-xl mb-4 mx-auto">
                <div className="text-blue-600">{tool.icon}</div>
              </div>

              <div className="text-center mb-4">
                <h3 className="text-lg font-semibold text-slate-900 mb-2">
                  {tool.name}
                </h3>
                <p className="text-sm text-slate-600 mb-3 line-clamp-2">
                  {tool.description}
                </p>

                <div className="flex items-center justify-center space-x-4 text-xs text-slate-500 mb-4">
                  <span className="bg-slate-100 px-2 py-1 rounded-lg">
                    {tool.category}
                  </span>
                  <span>v{tool.version}</span>
                  <span>{tool.fileSize}</span>
                </div>
              </div>

              <button
                onClick={() =>
                  handleUtilityDownload(tool.name, tool.downloadUrl)
                }
                className="w-full bg-gradient-to-r from-slate-600 to-slate-700 hover:from-slate-700 hover:to-slate-800 text-white py-2.5 px-4 rounded-lg font-medium transition-all duration-200 transform hover:scale-105 flex items-center justify-center space-x-2"
              >
                <Download className="w-4 h-4" />
                <span>下载工具</span>
              </button>
            </div>
          ))}
        </div>

        <div className="mt-8 text-center">
          <div className="bg-blue-50 border border-blue-200 rounded-xl p-6 max-w-4xl mx-auto">
            <div className="flex items-center justify-center space-x-3 mb-3">
              <AlertCircle className="w-5 h-5 text-blue-600" />
              <h4 className="text-lg font-semibold text-blue-900">使用说明</h4>
            </div>
            <p className="text-blue-800 text-sm leading-relaxed">
              请根据您的具体需求选择相应的工具。
              如果您不确定需要哪个工具，请联系技术支持团队获取帮助。
            </p>
          </div>
        </div>
      </div>

      {/* Footer */}
      <footer className="bg-slate-900 text-white py-12">
        <div className="border-slate-700 pt-8 text-center text-slate-400">
          <p>&copy; 2025 DrugSupplyERP 下载中心.</p>
        </div>
      </footer>
    </div>
  );
}

export default App;
